<template>
    <view class="page">
        <view class="activity-Image">
            <img mode="widthFix" :src="activityDetail.img_url">
        </view>
        <view class="activity-head">
            <view class="activity-head-title">{{activityDetail.name}}</view>
            <view class="activity-head-tip">
                <view class="head-status" :class="{'red':activityDetail.activity_status_name=='报名中','yellow':activityDetail.activity_status_name=='进行中','green':activityDetail.activity_status_name=='已结束'}">{{activityDetail.activity_status_name}}</view>
                <view class="head-tip-item">
                    <img :src="File_Url+'eyes-icon.png'" />
                    <text>{{activityDetail.browse_num}}</text>
                </view>
                <view class="head-tip-item">
                    <img :src="File_Url+'collect-active.png'" v-if="activityDetail.is_collection==1" />
                    <img :src="File_Url+'collect.png'" v-else/>
                    <text>{{activityDetail.attention_num}}</text>
                </view>
            </view>
            <view class="activity-head-content">
                <view class="activity-cost">
                    <text>活动费用：</text>{{activityDetail.cost==0.00?'免费':'￥'+activityDetail.cost}}
                </view>
                <view class="activity-time">
                    <text>活动起始时间：</text>{{(activityDetail.start_time||'').split(' ')[0].split('-').join('.')}} - {{(activityDetail.end_time||'').split(' ')[0].split('-').join('.')}}
                </view>
                <view class="activity-place">
                    <text>活动地点：</text>{{activityDetail.province[2]=='市'?activityDetail.province+activityDetail.area:activityDetail.province+activityDetail.city+activityDetail.area}}{{activityDetail.address}}
                </view>
            </view>
            <view class="activity-head-sponsor">
                <view class="title">活动方：</view>
                <view class="sponsor-item">
                    <img :src="activityDetail.active_party_Info.logo_url" />
                    <text>{{activityDetail.active_party_Info.name}}</text>
                </view>
            </view>
        </view>
        <view class="activity-details">
            <view class="activity-details-title">活动详情</view>
            <view class="activity-details-content" v-html="activityDetail.detail">
<!--                <text>广州途远企业管理咨询有限公司是一家专业提供体验式培训以及大型户外活动设计实施服务的公司。主要从事户外拓展训练、企业室内培训课程、主题户外活动设计等方面的咨询和培训服务。</text>-->
<!--                <img mode="widthFix" src="/static/img/123.jpg">-->
            </view>
        </view>
        <view class="page-flex-bottom">
            <view class="flex-bottom-left">
                <img :src="File_Url+'needs-collect-active.png'" @click="userAttentionActivity" v-if="activityDetail.is_collection==1" />
                <img :src="File_Url+'needs-collect.png'" @click="userAttentionActivity" v-else/>
                <button open-type='share'><img :src="File_Url+'needs-share.png'" /></button>
            </view>
            <view class="flex-bottom-right">
                <button class="blue" v-if="activityDetail.is_join==1">
                    {{activityDetail.activity_status_name=='报名中'?'已报名':(activityDetail.activity_status_name=='进行中'?(checkStatus==0?'未签到':'已签到'):'已结束')}}
                </button>
                <button class="blue" v-if="activityDetail.activity_status_name=='报名中'&&activityDetail.is_join!=1" @click="enrolmentActivities(activityDetail.id)">报名</button>
                <button class="grey" v-if="activityDetail.activity_status_name!='报名中'&&activityDetail.is_join!=1">报名</button>
            </view>
        </view>
        <authorization :show.sync="authorization"></authorization>
    </view>
</template>

<script>
    import authorization from "../../components/authorization/authorization";
    import parse from "../../../components/gaoyia-parse/parse";
    export default {
        name: "activityDetail",
        components: {authorization},
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                activityId: '',
                type:'',
                activityDetail: {},
                authorization: false,
                checkStatus: '',
            }
        },
        onLoad(query){
            this.activityId = query.activityId
            if (query.type){
                this.type = query.type
            }
        },
        onShow(){
            this.getActivityDetail()
        },
        onShareAppMessage(){
            return {
                title: this.activityDetail.name,
                path: '/pages/details/activityDetail/activityDetail?activityId='+this.activityId,
                imageUrl: this.activityDetail.img_url
            }
        },
        methods:{
            //获取活动详情
            async getActivityDetail(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    activity_id: this.activityId
                }
                const res = await this.$api.getActivityDetail(params);
                if (res.data.level == 'success'){
                    let str = res.data.data;
                    str.detail = str.detail.replace(/<img[^>]*>/gi, function (match, capture) {
                        return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
                    })
                    str.detail = str.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
                    this.activityDetail = str;
                    this.activityCheckStatus()
                }else {
                    // uni.showToast({
                    //     icon: 'none',
                    //     title: res.data.message,
                    //     duration: 1500
                    // })
                    var _this = this;
                    if (res.data.data == 1){
                        uni.showModal({
                            title: res.data.message,
                            content: '是否取消关注/收藏？',
                            success: async res => {
                                if (res.confirm) {
                                    _this.userAttentionActivity();
                                }else if (res.cancel) {
                                    uni.showToast({
                                        icon:'none',
                                        title: "取消成功！",
                                        duration: 3000
                                    })
                                    setTimeout(function () {
                                        uni.navigateBack({
                                            delta:1
                                        })
                                    },3000)
                                }
                            }
                        })
                    } else {
                        setTimeout(function () {
                            uni.navigateBack({
                                delta:1
                            })
                        },1500)
                    }

                }
            },
            //活动签到
            async activityCheckIn(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    activity_id: this.activityId
                }
                const res = await this.$api.activityCheckIn(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.activityCheckStatus();
                }else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.activityCheckStatus();
                }
            },
            //获取活动签到状态
            async activityCheckStatus(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    activity_id: this.activityId
                }
                const res = await this.$api.activityCheckStatus(params);
                if (res.data.level == 'success') {
                    this.checkStatus = res.data.data
                    if (this.checkStatus==0&&this.type == 'check'&&this.activityDetail.is_join==1){
                        uni.showModal({
                            title: '提示',
                            content: '是否签到？',
                            success: async res => {
                                if (res.confirm) {
                                    this.activityCheckIn();
                                } else if (res.cancel) {
                                    uni.showToast({
                                        icon:'none',
                                        title: "取消签到！",
                                        duration: 1500
                                    })
                                }
                            }
                        })
                    }
                }else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                        duration: 1500
                    })
                    let _this = this;
                    setTimeout(function () {
                        if(res.data.data == 'login'){
                            _this.authorization = true
                        }
                    },1500)
                }
            },
            //收藏或取消收藏活动
            async userAttentionActivity(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    activity_id: this.activityId
                }
                const res = await this.$api.userAttentionActivity(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getActivityDetail();
                } else {
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getActivityDetail();
                }
            },
            // //获取分享二维码图片
            // async generateShareQrCode(){
            //     let params = {
            //         user_token: uni.getStorageSync('userToken'),
            //         activity_id: this.activityId
            //     }
            //     const res = await this.$api.generateShareQrCode(params);
            //     if (res.data.level == 'success'){
            //         uni.showToast({
            //             icon:'success',
            //             title: res.data.message,
            //             duration: 3000
            //         })
            //     } else {
            //         uni.showToast({
            //             icon:'none',
            //             title: res.data.message,
            //             duration: 3000
            //         })
            //     }
            // },
            //报名活动
            enrolmentActivities(id){
                if (uni.getStorageSync('userToken')) {
                    uni.navigateTo({
                        url:'/pages/details/activityDetail/enrolmentActivities/enrolmentActivities?activityId='+id
                    })
                }else {
                    uni.showToast({
                        icon: 'none',
                        title: '请先登录~',
                        duration: 3000
                    })
                    setTimeout(function () {
                        uni.switchTab({
                            url:'/pages/person/person'
                        })
                    },3000)
                }

            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        min-height: calc(100vh - 128rpx);
        padding-bottom: 128rpx;
        background: #F8F8F8;
    }
    .activity-Image{
        width: 100vw;
    }
    .activity-head{
        padding: 30rpx;
        margin-bottom: 10rpx;
        background: #FFFFFF;
        .activity-head-title{
            height: 50rpx;
            line-height: 50rpx;
            font-size: 36rpx;
            font-weight: bold;
            @include ellipsis(1);
        }
        .activity-head-tip{
            @include flex(flex-end);
            flex-direction: row;
            padding: 20rpx 0 30rpx 0;
            border-bottom: 1rpx solid #E5E5E5;
            .head-status{
                margin-right: auto;
                height: 40rpx;
                line-height: 40rpx;
            }
            .head-tip-item{
                @include flex(flex-start);
                flex-direction: row;
                margin-left: 20rpx;
                img{
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 10rpx;
                }
                text{
                    color: #666666;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 26rpx;
                }
            }
        }
        .activity-head-content{
            padding: 30rpx 0;
            border-bottom: 1rpx solid #E5E5E5;
            view{
                margin-bottom: 10rpx;
            }
            view:last-child{
                margin-bottom: 0rpx;
            }
            .activity-cost{
                color: #DF3636;
                font-weight: bold;
                font-size: 40rpx;
                height: 56rpx;
                line-height: 56rpx;
                text{
                    font-size: 30rpx;
                    height: 56rpx;
                    line-height: 56rpx;
                    font-weight: normal;
                    color: #333333;
                }
            }
            .activity-time{
                height: 42rpx;
                font-size: 30rpx;
                line-height: 42rpx;
                text{
                    font-weight: bold;
                }
            }
            .activity-place{
                height: 84rpx;
                line-height: 42rpx;
                font-size: 30rpx;
                text{
                    font-weight: bold;
                }
            }
        }
        .activity-head-sponsor{
            padding: 30rpx 0;
            .title{
                height: 42rpx;
                line-height: 42rpx;
                font-weight: bold;
                font-size: 30rpx;
                margin-bottom: 10rpx;
            }
            .sponsor-item{
                padding-top: 20rpx;
                @include flex(flex-start);
                flex-direction: row;
                img{
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 360rpx;
                }
                text{
                    font-size: 32rpx;
                    line-height: 45rpx;
                    height: 45rpx;
                    padding: 0 25rpx;
                }
            }
        }
    }
    .activity-details{
        padding: 30rpx;
        background: #FFFFFF;
        .activity-details-title{
            height: 56rpx;
            line-height: 56rpx;
            text-align: center;
            font-size: 40rpx;
            font-weight: bold;
        }
        .activity-details-content{
            padding: 20rpx 0;
            text{
                font-size: 30rpx;
                line-height: 42rpx;
            }
            img{
                margin-top: 30rpx;
                max-width: 100% !important;
            }
        }
    }
    .page-flex-bottom{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 88rpx;
        width: calc(100vw - 60rpx);
        background: #FFFFFF;
        padding: 20rpx 30rpx;
        @include flex(flex-start);
        flex-direction: row;
        border-top: 1rpx solid #E5E5E5;
        .flex-bottom-left{
            @include flex(flex-start);
            flex-direction: row;
            button{
                padding: 0;
                margin: 0;
                border: none;
                background: #FFFFFF;
                line-height: normal;
            }
            button::after{
                border: none;
            }
            img{
                width: 60rpx;
                height: 60rpx;
                margin-right: 40rpx;
            }
        }
        .flex-bottom-right{
            margin-left: auto;
            @include flex();
            flex-direction: row;
            button{
                height: 88rpx;
                padding: 0 150rpx;
                line-height: 88rpx;
                border-radius: 44rpx;
                font-weight: bold;
                font-size: 34rpx;
            }
            .blue{
                background: #3782FF;
                color: #FFFFFF;
            }
            .grey{
                background: #999999;
                color: #FFFFFF;
            }
        }
    }
</style>